@use '../Variables.scss';

#ToolBar {
  width: 2.5em;
  aspect-ratio: 1;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 9;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 1em;
  background: #fff;
  svg {
    display: flex;
    cursor: pointer;
    font-size: 1.85em;
    color: Variables.$dark-grey;
    &.active {
      color: Variables.$blue;
    }
  }
  &svg:hover {
    color: Variables.$blue;
  }
}

// .compact {
//   #ToolBar {
//     width: 2.5em;
//     aspect-ratio: 1;
//     padding: 0 1em;
//     svg {
//       font-size: 1.85em;
//     }
//   }
// }

.dark {
  #ToolBar {
    background: #212224;
    svg {
      color: Variables.$mid-grey;
      &.active {
        color: Variables.$blue;
      }
    }
    & svg:hover {
      color: Variables.$blue;
    }
  }
}
